import { TreeSelectProps } from "@/types/props";
import { Input, ScrollView, View } from "@tarojs/components";
import { useState } from "react";

import { Cross, Plus } from "@taroify/icons";
import ScrollBetweenMenu from "../menus/ScrollBetweenMenu";

export default ({
  treeData = [
    {
      title: "社会",
      kid: "1",
      items: [
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
        { label: "酒吧舞", value: "23232" },
      ],
    },
    {
      title: "汽车",
      kid: "2",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "3",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "4",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "5",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "6",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "7",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "8",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "9",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "10",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "11",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "12",
      items: [{ label: "211", value: "23232" }],
    },
    {
      title: "汽车",
      kid: "13",
      items: [{ label: "211", value: "23232" }],
    },
  ],

  onChange,
  add = false,
}: TreeSelectProps) => {
  const [curTitle, setCurTitle] = useState(0);
  const [titleValue, setTitleValue] = useState("");
  const [addTitle, setAddTitle] = useState(true);
  const [scrollIntoView, setScrollIntoView] = useState("");

  function clickTitle(i) {
    setCurTitle(i);
    setScrollIntoView(`id${treeData[i].kid}`);
  }
  return (
    <ScrollBetweenMenu>
      <View>
        {treeData.map((el, i) => (
          <View
            key={i}
            className="h-12 flex justify-center items-center relative"
            onClick={() => {
              clickTitle(i);
            }}
            style={{
              backgroundColor: curTitle == i ? "white" : "transparent",
              //TODO：也不知道为什么这个圆角不显示
              borderTopRightRadius: curTitle === i + 1 ? "100px" : "0", // 如果想要为下一个标题增加圆角，可以保留这一行
              borderBottomRightRadius: i == treeData.length ? "100px" : "0",
            }}
          >
            {el.title}
            {add && (
              <View className="absolute right-1 top-1">
                <Cross />
              </View>
            )}
          </View>
        ))}
        {add && (
          <View className="h-10 flex justify-center py-1 px-4 items-center bg-white">
            {addTitle ? (
              <Plus size={30} onClick={() => setAddTitle(false)} />
            ) : (
              <View>
                <Input
                  focus
                  value={titleValue}
                  onInput={(e) => setTitleValue(e.target.value)}
                  maxlength={8}
                  onBlur={() => setAddTitle(true)}
                />
              </View>
            )}
          </View>
        )}
      </View>
      <View>
        {treeData.map((el, i) => {
          return (
            <View key={i} className="mb-5" id={`id${el.kid}`}>
              <View className="font-semibold mb-3">{el.title}</View>
              <View className="flex gap-3 flex-wrap">
                {el.items.map((item, j) => {
                  return (
                    <View
                      onClick={() => onChange && onChange(item.label)}
                      key={j}
                      className="py-1 relative px-4 rounded-full bg-[#F2F2F2] text-xs"
                    >
                      {item.label}
                      {add && (
                        <View className="absolute right-1 -top-1">
                          <Cross />
                        </View>
                      )}
                    </View>
                  );
                })}
                {add && (
                  <View className="py-1 px-4 rounded-full bg-[#F2F2F2] text-xs">
                    {addTitle ? (
                      <Plus size={12} onClick={() => setAddTitle(false)} />
                    ) : (
                      <View>
                        <Input
                          focus
                          value={titleValue}
                          onInput={(e) => setTitleValue(e.target.value)}
                          maxlength={8}
                          onBlur={() => setAddTitle(true)}
                        />
                      </View>
                    )}
                  </View>
                )}
              </View>
            </View>
          );
        })}
      </View>
    </ScrollBetweenMenu>
  );
};
